<template>
    <a-card :bodyStyle="{ padding: 0 }">
        <div style="display: flex; justify-content: space-between; align-items: center;">
            <span style="font-weight: bold; font-size: 15px;">已分配房间:</span>
            <a-button type="primary" @click="clearRoom">清空选择</a-button>
        </div>
        <!-- , y: 600 -->
        <a-table ref="table" size="small" :scroll="{ x: 500 }" bordered rowKey="roomCode" :columns="columns"
            :dataSource="dataSource" :pagination="false" :loading="loading" class="j-table-force-nowrap"
            @change="handleTableChange"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio' }">

        </a-table>
        <!-- <example style="bottom: 0;" /> -->
    </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
    name: 'FenPeiRoomList',
    mixins: [JeecgListMixin],
    props: {
        dingdan: {
            type: Object,
            required: true,
        },
        disabled: {
            type: Boolean,
            default: false,
            required: false
        },
    },
    watch: {
        dingdan: {
            deep: true,
            immediate: true,
            handler() {
                this.queryParam.roomRegisterCode = this.dingdan.roomRegisterCode
                this.loadData()
            }
        },
        dataSource: {
            eep: true,
            immediate: true,
            handler() {
                this.$emit('roomList', this.dataSource)
            }
        }
    },
    mounted() {
        this.$emit('roomList', this.dataSource)
    },
    data() {
        return {
            isorter: {
                column: 'roomCode',
                order: 'asc',
            },
            url: {
                list: '/room/roomRegisterRoom/queryFpRoomList',
            },

        }
    },
    computed: {
        columns() {
            return [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 40,
                    align: "center",
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '房间号',
                    align: "center",
                    dataIndex: 'roomCode',
                    scopedSlots: { customRender: 'roomCode' },
                },
                {
                    title: '房间类型',
                    align: "center",
                    dataIndex: 'roomTypeCode_dictText',
                    // filters: this.filterData,
                    // onFilter: (value, record) => record.roomTypeCode.indexOf(value) === 0,
                },
                {
                    title: '额定人数',
                    align: "center",
                    dataIndex: 'ratingNum'
                },
                {
                    title: '入住时间',
                    align: "center",
                    dataIndex: 'dateArrival'
                },
                {
                    title: '离店时间',
                    align: "center",
                    dataIndex: 'dateDeparture'
                },
                {
                    title: '楼层',
                    align: "center",
                    dataIndex: 'roomLevelCode_dictText'
                },
                {
                    title: '房间描述',
                    align: "center",
                    dataIndex: 'roomDesc'
                },
            ]
        },
    },
    methods: {
        onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectionRows = selectionRows;
            this.$emit('selectRoom', selectionRows)
        },
        clearRoom() {
            this.selectedRowKeys = [];
            this.selectionRows = [];
            this.$emit('selectRoom', this.selectionRows)
        }
    }
}
</script>